<template>
	<view class="Rechargeable">
		<view class="tabel">
      <view class="tabelList" v-for="RechargeableTitle in recharcardTitleList "
            :style="{color:option == RechargeableTitle.recharcard_id ? '#4cd964' : '#b3b3b3'}"
            @tap="onLabel(RechargeableTitle.recharcard_id)"
            :key="RechargeableTitle.recharcard_id" >
        {{RechargeableTitle.recharcard_title }}
        <view class="son" v-if="option == RechargeableTitle.recharcard_id"></view>
      </view>

		</view>
		<view class="list" v-if="recharcarList != ''">
			<view class="listOne" v-for="(item,index) in recharcarList">
				<image :src="item.recharcard_img" mode="" style="width: 100%;height: 100%;" @click="go('/pages/users/rechargeable/details?id=' + item.id)"></image>
			</view>
		</view>
		<view class="no" v-else>
			<view class="icon"></view>
			<view class="txt">暂无 {{change_recharcard_title}}</view>
		</view>

    <home v-if="navigation"></home>
    <!-- #ifdef MP -->
    <authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
    <!-- #endif -->

	</view>
</template>

<script>
	import {recharcardUserRecordList} from '@/api/user.js';
  import home from '@/components/home';
  import {
    mapGetters
  } from "vuex";
  import {
    toLogin
  } from '@/libs/login.js';
	export default {
    components: {
      home
    },
    computed: mapGetters(['isLogin']),
    watch: {
      isLogin: {
        handler: function(newV, oldV) {
          if (newV) {
            // #ifdef H5 || APP-PLUS
            // this.getUseCoupons();
            // #endif
          }
        },
        deep: true
      }
    },
		data() {
			return {
        isShowAuth: false, //是否隐藏授权
				option:'',
				recharcarList:[],
        recharcardTitleList:[
          {
            recharcard_id:'',
            recharcard_title:'全部',
          },
          {
            recharcard_id:1,
            recharcard_title:'提货券',
          },
          {
            recharcard_id:2,
            recharcard_title:'商品券',
          },
          // {
          //   recharcard_id: 3 ,
          //   recharcard_title:'专区券',
          // }
        ],
        change_recharcard_title:'提货券',
        change_recharcard_id:'1',
			}
		},
		onLoad(){
      if (!this.isLogin) {
        // #ifdef H5 || APP-PLUS
        toLogin()
        // #endif
        // #ifdef MP
        this.isShowAuth = true;
        // #endif
      }
		},
		onShow(){
			this.getList()
		},
		methods: {
			go(url){
				uni.navigateTo({
					url
				})
			},
      onLoadFun(){
        this.isShowAuth = false;
      },
      // 授权关闭
      authColse: function(e) {
        this.isShowAuth = e;
      },
      /*
        提货券兑换方法
       */
			onLabel(n){
        if (n== ''){
          this.change_recharcard_title =''
          this.change_recharcard_id =''
        }else{
          this.change_recharcard_title = this.recharcardTitleList[n].recharcard_title
          this.change_recharcard_id = this.recharcardTitleList[n].recharcard_id
        }
				this.option = n
				this.getList()
			},
			getList(){
				var obj = {
					type:this.option
				}
        recharcardUserRecordList(obj).then(res=>{
          console.log('res=== ',res)
					this.recharcarList = res.data.list
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F4F0;
	}
	.Rechargeable{
		width: 100%;
	}
	.tabel{
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
	}
	.tabelList{
		width: calc(100% / 3);
		text-align: center;
		line-height: 90rpx;
		border-bottom: 1px solid #ccc;
		color: #b3b3b3;
		font-size: 33rpx;
		position: relative;
		.son{
			width: 60rpx;
			height: 4rpx;
			background-color: #4cd964;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -30rpx;
		}
	}
	.no{
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -150rpx;
		margin-left: -150rpx;
		text-align: center;
		.txt{
			font-size: 36rpx;
		}
	}
	.list{
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 120rpx;
		.listOne{
			width: 100%;
			height: 360rpx;
			padding: 10rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
	}
	.floot{
		display: flex;
		position: fixed;
		bottom: 0;
		height: 120rpx;
		background-color: #fff;
		width: 100%;
		justify-content: space-between;
		.left{
			text-align: center;
			padding-top: 12rpx;
			padding-left: 35rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}
		.right{
			height: 100%;
			// width: 240rpx;
			.btn{
				width: 470rpx;
				height: 80rpx;
				margin-top: 20rpx;
				margin-right: 20rpx;
				background-color: #4cd964 ;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 35rpx;
			}
		}
	}
</style>
